let rluer = function () {
    this.initialize.apply(this, arguments);
};
rluer.prototype.initialize = function (options) {
    if (options) {
        this.setOptions(options);
    }
};
rluer.prototype.setOptions = function (options) {
    if (options) {
        this._setOptions(options);
    }
};
rluer.prototype._setOptions = function (options) {
    this.initCanvas(options.canvas);
    this.initOptions(options.options);
};
rluer.prototype.initCanvas = function (canvas) {
    this.canvas = null;
    this.canvas = canvas;
};
rluer.prototype.getInitOptions = function () {
    return {
        width: 20,
        height: 20
    };
};
rluer.prototype.initOptions = function (options) {
    options = options || {};
    let that = this.options = {};
    let cacheOptions = this.getInitOptions();
    for (let key in cacheOptions) {
        that[key] = options[key] || cacheOptions[key];
    }
};
rluer.prototype.setPostion = function (el, options) {
    var el = Array.prototype.shift.call(arguments);
    for (let key in options) {
        el.style[key] = options[key] + "";
    }
};
rluer.prototype._set;
rluer.prototype.postion = function () {
    return ["top", "left", "right", "bottom"];
};
rluer.prototype.create = function (type) {
    if (!type) {
        type = "top";
    }
    if (!this.postion().includes(type)) {
        type = "top";
    }
    if (!this.rlueel) {
        this.rlueel = [];
    }
    let wrapperEl = this.canvas.wrapperEl;
    var el = document.createElement("canvas");
    wrapperEl.append(el);
    this.setStyle(el, type);
};
rluer.prototype.setStyle = function (el, type) {
    let w = this.canvas.getWidth();
    let h = this.canvas.getHeight();
    let options = this.options;
    el.style.position = "absolute";
    el.style.border = "none";
    switch (type) {
        case "top":
            el.width = w;
            el.height = options.height;
            this.setPostion(el, {
                top: -options.height + "px",
                left: 0,
                width: w + "px",
                height: options.height + "px"
            });
            break;
        case "left":
            el.width = options.width;
            el.height = h;
            this.setPostion(el, {
                top: 0,
                left: -options.width + 'px',
                width: options.width + "px",
                height: h + "px"
            });
            break;
        case "bottom":
            el.width = w;
            el.height = options.height;
            this.setPostion(el, {
                bottom: -options.height + "px",
                left: 0,
                width: w + "px",
                height: options.height + "px"
            });
            break;
        case "right":
            el.width = options.width;
            el.height = h;
            this.setPostion(el, {
                top: 0,
                right: -options.width + "px",
                width: options.width + "px",
                height: h + "px"
            });
            break;
    }
    this.rlueel.push({
        type: type,
        el: el,
    });
};
rluer.prototype.clear = function (type) {
};
rluer.prototype._drawborder = function (ctx, el) {
    if (this.options.border) {
        ctx.moveTo(0, 0);
        ctx.lineTo(el.width, 0);
        ctx.lineTo(el.width, el.height);
        ctx.lineTo(0, el.height);
        ctx.lineTo(0, 0);
    }
};
let base =2;
rluer.prototype._drawtop = function (options) {
    options.el.height = options.el.height;
    let w = this.options.width;
    let h = this.options.height;
    let x = this.viewportTransform()[4];
    let y = this.viewportTransform()[5];
    let sc = this.viewportTransform()[0];
    let ctx = options.el.getContext("2d");
    let el = options.el;
    // ctx.translate(x,0);
    // ctx.scale(sc,sc)
    ctx.beginPath();
    x = x / sc;
    let l = x %10;
    let length = el.width/sc;
    for (let i = -10; i < length+10; i++) {
        if(i%10===0){
            ctx.moveTo((i + l) * sc, 0);
            ctx.lineTo((i + l) * sc, h);
        }else {
            ctx.moveTo((i + l) * sc, .75*h);
            ctx.lineTo((i + l) * sc, h);
        }
        
        if(i%10===0){
           ctx.fillText(Math.ceil( i - (x - l)), (i + l) * sc + 2, 10); 
        }
        
    }
    this._drawborder(ctx, el);
    ctx.stroke();
};
rluer.prototype._drawbottom = function (options) {
    this._drawtop(options);
};
rluer.prototype.viewportTransform = function () {
    return this.canvas.viewportTransform || this.canvas.viewportTransform();
};
rluer.prototype._drawleft = function (options) {
    options.el.height = options.el.height;
    let w = this.options.width;
    let h = this.options.height;
    let x = this.viewportTransform()[4];
    let y = this.viewportTransform()[5];
    let sc = this.viewportTransform()[0];
    let ctx = options.el.getContext("2d");
    let el = options.el;
    ctx.beginPath();
    y = y / sc;
    let l = y % 50;
    let length = el.height / sc / 50;
    for (let i = 0; i < length; i++) {
        ctx.moveTo(0, (50 * i + l) * sc);
        ctx.lineTo(h, (50 * i + l) * sc);
        ctx.fillText(Math.ceil(50 * i - (y - l)), 0, (50 * i + l) * sc + 10);
    }
    this._drawborder(ctx, el);
    ctx.stroke();
};
rluer.prototype._drawright = function (options) {
    this._drawleft(options);
};
rluer.prototype._draw = function (options) {
    //清空画布
    // this.chunk("_draw"+options.type,options)
    this["_draw" + options.type](options);
    // if(this.cacheDraw["_draw"+options.type]){
    //      this.cacheDraw["_draw"+options.type]=options;
    // }else{
    //     this["_draw"+options.type](options) 
    // }   
};
rluer.prototype._chunk = function (fn, options) {
    let obj = this.cache = {};
    let that = obj[fn];
    if (!that) {
        that = obj[fn] = {
            next: false,
            run: false,
            options: options
        };
    }
    that.next = true;
    if (options) {
        that.options = options;
    }
    if (that.next && !that.run) {
        that.next = false;
        that.run = true;
        this[fn](that.options);
        that.run = false;
    }
};
rluer.prototype.draw = function () {
    let _this = this;
    if (!this.rlueel) {
        return;
    }
    if (!this.cacheDraw) {
        this.cacheDraw = {};
    }
    for (let i in this.rlueel) {
        _this._draw(this.rlueel[i]);
    }
};
rluer.prototype.add = function (type) {
    this.create(type);
    this.draw();
};
rluer.prototype.remove = function (type) {
    this.rlueel = this.rlueel.filter(function (item) {
        if (item.type == type) {
            if (item.el instanceof Element) {
                Element.prototype.remove.call(item.el);
            }
        }
        return item.type !== type;
    });
    this.draw();
};
rluer.prototype.toggle = function (type) {
    let that = this;
    Array.prototype.forEach.call(this.rlueel, function (item) {
        if (!type) {
            (item.el.width + item.el.height) == 0 ? that.setStyle(item.el, item.type) : (item.el.width = item.el.height = 0);
        }
        else if (item.type == type) {
            (item.el.width + item.el.height) == 0 ? that.setStyle(item.el, item.type) : (item.el.width = item.el.height = 0);
        }
    });
    this.draw();
};
export default rluer;
